<template>
	<view class="diy-navBar" :style="{ background: itemStyle.background }">
		<view :class="'data-list avg-sm-' + itemStyle.rowsNum">
			<view class="item-nav" v-for="(dataItem, index) in dataList" :key="index">
				<view class="nav-to" @tap="navigationTo" :data-url="dataItem.linkUrl">
					<view class="item-image"><image class="image" mode="widthFix" :src="dataItem.imgUrl"></image></view>
					<view class="item-text f-28 onelist-hidden" :style="'color: ' + dataItem.color">{{ dataItem.text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Route from '@/utils/Route.js';
export default {
	props: {
		itemIndex: String,
		itemStyle: Object,
		params: Object,
		dataList: Array
	},
	data() {
		return {};
	},
	methods: {
		/**
		 * 跳转到指定页面
		 */
		navigationTo(e) {
			Route.navigateTo({ url: '/' + e.currentTarget.dataset.url });
		}
	}
};
</script>

<style>
/* 导航组 */

.diy-navBar .data-list::after {
	clear: both;
	content: ' ';
	display: table;
}

.diy-navBar .item-nav {
	float: left;
	margin: 10px 0;
	text-align: center;
}

.diy-navBar .item-nav .item-image {
	margin-bottom: 4px;
	font-size: 0;
}

.diy-navBar .item-nav .item-image .image {
	width: 88rpx;
	height: 88rpx;
}

/* 分列布局 */

.diy-navBar .avg-sm-3 > .item-nav {
	width: 33.33333333%;
}

.diy-navBar .avg-sm-4 > .item-nav {
	width: 25%;
}

.diy-navBar .avg-sm-5 > .item-nav {
	width: 20%;
}
</style>
